<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Netty-Websocket</title>
    <style type="text/css">
    textarea{
    	width: 520px;
    	height: 100px;
    }
    #responseText{
    	height: 300px;
    }
    </style>
    <script type="text/javascript">
	    Date.prototype.format = function(fmt) {           
	        var o = {           
	        "M+" : this.getMonth()+1, //月份           
	        "d+" : this.getDate(), //日           
	        "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时           
	        "H+" : this.getHours(), //小时           
	        "m+" : this.getMinutes(), //分           
	        "s+" : this.getSeconds(), //秒           
	        "q+" : Math.floor((this.getMonth()+3)/3), //季度           
	        "S" : this.getMilliseconds() //毫秒           
	        };           
	        var week = {           
	        "0" : "/u65e5",           
	        "1" : "/u4e00",           
	        "2" : "/u4e8c",           
	        "3" : "/u4e09",           
	        "4" : "/u56db",           
	        "5" : "/u4e94",           
	        "6" : "/u516d"          
	        };           
	        if(/(y+)/.test(fmt)){           
	            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));           
	        }           
	        if(/(E+)/.test(fmt)){           
	            fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);           
	        }           
	        for(var k in o){           
	            if(new RegExp("("+ k +")").test(fmt)){           
	                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));           
	            }           
	        }           
	        return fmt;           
	    }
        // by zhengkai.blog.csdn.net
        var socket;
        function connect(){
	        if(!window.WebSocket){
	            window.WebSocket = window.MozWebSocket;
	        }
	        if(window.WebSocket){
	        	var uid = form.uid.value;
	        	if(isEmpty(uid)){
	        		alert('请输入用户名');
	        		form.uid.value = '';
	        		return false;
	        	}
	        	form.btnOpen.disabled = true;
	            socket = new WebSocket("ws://192.168.2.175:12345/ws1?user="+uid+"&gid=777");
	            socket.onmessage = function(event){
	                var ta = document.getElementById('responseText');
	                ta.value += event.data+"\r\n";
	            };
	            socket.onopen = function(event){
	                var ta = document.getElementById('responseText');
	                ta.value += "Netty-WebSocket服务器。。。。。。连接  \r\n";
	                form.btnSend.disabled=false;
	            	form.btnInterval.disabled=false;
	                form.btnOpen.disabled=true;
	                form.btnClose.disabled=false;
	                form.uid.disabled=true;
	            };
	            socket.onclose = function(event){
	                var ta = document.getElementById('responseText');
	                ta.value += "Netty-WebSocket服务器。。。。。。关闭 \r\n";
	                form.btnSend.disabled=true;
	                form.btnOpen.disabled=false;
	                form. btnClose.disabled=true;
	                form.uid.disabled=false;
	                cancelInterval();
	                form.btnInterval.disabled=true;
	            };
	            socket.onerror = function(event){
	            	console.log(event);
	            	form.btnSend.disabled=true;
	            	form.btnInterval.disabled=true;
	            	form.btnOpen.disabled=false;
	                form. btnClose.disabled=true;
	                form.uid.disabled=false;
	                cancelInterval();
	                form.btnInterval.disabled=true;
	            };
	        }else{
	            alert("您的浏览器不支持WebSocket协议！");
	        }
        }
        function send(msg){
            if(!window.WebSocket){return;}
            if(socket.readyState == WebSocket.OPEN){
            	var msg = msg?msg:form.message.value;
            	if(isEmpty(msg)) {
            		alert('不能发送空消息！');
            		form.message.value = '';
            		return;
            	}
            	var message = form.uid.value+'说：'+msg;
                socket.send(new Date().format('MM-dd HH:mm:ss')+':\r\n'+message);
                form.message.value = '';
            }else{
                alert("WebSocket 连接没有建立成功！");
                form.btnInterval.disabled=true;
            }
        }
        function disconnect(){
        	socket.close();
        }
        function isEmpty(s){
        	return /^\s*$/.test(s);
        }
        var interval;
        function startInterval(){
        	interval = setInterval(function(){send(form.uid.value)}, 3000);
        	form.btnInterval.disabled=true;
        	form.btnCancelInterval.disabled=false;
        }
        function cancelInterval(){
        	if(interval){
        		clearInterval(interval);
        	}
        	form.btnInterval.disabled=false;
        	form.btnCancelInterval.disabled=true;
        }
    </script>
</head>
<body>
<form onSubmit="return false;" name="form">
    <label>用户名</label><input type="text" name="uid" value="" />
    <input type="button" name="btnOpen" value="登录" onClick="connect()" />
    <input type="button" name="btnClose" value="断开连接" onClick="disconnect()" disabled/>
    <hr color="black" />
    <h3>华贝聊天室</h3>
    <textarea id="responseText" disabled="disabled"></textarea>
    
    <div>
    <p><label>发送消息</label></p>
    <textarea name="message" value="这里输入消息" style="rows: 5" ></textarea>
    <div>
    <input type="button" name="btnSend" value="发送消息" onClick="send()" disabled />
    <input type="button" name="btnInterval" value="测试发送消息" onClick="startInterval()" disabled />
    <input type="button" name="btnCancelInterval" value="停止测试发送消息" onClick="cancelInterval()" disabled />
    </div>
    </div>
</form>
</body>
</html>